<template>
  <div class="app" ref="appRef"></div>
</template>

<script lang="ts">
  export default {
    name: "App",
  };
</script>

<script lang="ts" setup>
  import { onMounted, ref } from "vue";
  import {
    Scene,
    PerspectiveCamera,
    PointLight,
    MeshBasicMaterial,
    BoxGeometry,
    Mesh,
    WebGLRenderer,
  } from "three";
  // 1. 创建场景对象。
  const scene = new Scene();
  // 2. 使用相机创建视角。
  const camera = new PerspectiveCamera(15, 1, 1, 500);
  camera.position.z = 10;
  // 3. 使用光源添加光照效果。
  const light = new PointLight(0xff0000);
  light.position.set(50, 50, 50);
  scene.add(light);
  // 4. 创建材质并在其中加载纹理图像。
  const material = new MeshBasicMaterial({
    color: 0xe91e63,
    wireframe: true,
  });
  // 5. 创建几何体并将材质应用到其中。
  const geometry = new BoxGeometry(1, 1, 1);
  const cube = new Mesh(geometry, material);
  scene.add(cube);
  // 6. 使用渲染器实例生成渲染结果。
  const renderer = new WebGLRenderer();
  renderer.setSize(400, 400);
  // 7. 将渲染结果呈现在HTML文档中。
  const appRef = ref();
  onMounted(() => {
    appRef.value.appendChild(renderer.domElement);
    function render() {
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    }
    render();
  });
</script>

<style scoped>
  .app {
    width: 500px;
    height: 500px;
  }
</style>